<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>生命周期</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
</head>

<body>
    <div id="react"> </div>
    <!--准备好一个容器-->
    <!--引入react核心库,核心库必须先引入-->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!--引入react-dom, 用于支持react操作DOM-->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!--引入babel,用于将jsx转为js-->
    <script type="text/javascript" src="./js/babel.min.js"></script>

    <script type="text/babel">

        class Life extends React.Component {

           //初次加载页面时的生命周期
            //(1)构造器
            constructor(props) {
                super(props)
 
                console.log("构造器constructor",)
                   //初始化状态
                  this.state={sum:0}
            }

            //(2)组件将要挂载的钩子
            componentWillMount(){
				console.log("组件将要挂载的钩子")
			}

            //(4)组件挂载完毕的钩子
            componentDidMount(){
             console.log('组件挂载完毕的钩子')
            }

            //(5)组件将要卸载的钩子
            componentWillUnmount(){
                console.log('组件将要卸载的钩子')
                            }


           //更新状态时的生命周期（具体看图）
           //(1)控制组件更新的"阀门"
           shouldComponentUpdate(){
            console.log('状态更新');
			return true //默认返回true,同意更新，false,不让更新

           }

           //（3）组件将要更新的钩子
           componentWillUpdate(){
               console.log("组件将要更新")

           }

           //(4)组件更新完毕的钩子
           componentDidUpdate(){
				console.log('组件更新完毕');
            }
            

        //组件强制更新
        force=()=>{
            this.forceUpdate()
        }


            //自定义赋值函数
            getSum=()=>{
            let {sum} =this.state
            sum =sum+1
            this.setState({sum})
            }

            getXz=()=>{
           //(2)卸载组件
           ReactDOM.unmountComponentAtNode(document.getElementById('react'))
                        
            }

             render() {
                console.log("组件挂载render")
                const {sum}=this.state
                return(
                    <div>
                      <h2>求和案列:{sum}</h2>
                     <button onClick={this.getSum}>求个和</button>
                     <button onClick={this.getXz}>卸载组件</button>
                     <button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
                    </div>
                )
             }
            }  
            ReactDOM.render(<Life/>, document.getElementById("react"));
    </script>

</body>

</html>